<script setup lang="ts">
	import { ref } from "vue";
	import { useRole } from "./utils/hook";
	import { PureTableBar } from "@/components/RePureTableBar";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import Delete from "@iconify-icons/ep/delete";
	import EditPen from "@iconify-icons/ep/edit-pen";
	import Refresh from "@iconify-icons/ep/refresh";
	import View from "@iconify-icons/ep/view";
	import AddFill from "@iconify-icons/ri/add-circle-line";

	const formRef = ref();
	const {
		form,
		loading,
		columns,
		dataList,
		pagination,
		onSearch,
		resetForm,
		handleSizeChange,
		handleCurrentChange,
		onDetail,
		openDialog,
		handleDelete
	} = useRole();
</script>

<template>
	<div class="main">
		<el-form ref="formRef" :inline="true" :model="form"
			class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
			<el-form-item label="关键词" prop="username">
				<el-input v-model="form.username" placeholder="请输入关键词" clearable class="!w-[180px]" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch">
					搜索
				</el-button>
				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
					重置
				</el-button>
			</el-form-item>
		</el-form>

		<PureTableBar title="任务列表" :columns="columns" @refresh="onSearch">
			<template #buttons>
				<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
					新增任务
				</el-button>
			</template>
			<template v-slot="{ size, dynamicColumns }">
				<pure-table align-whole="center" table-layout="auto" :loading="loading" :size="size" adaptive
					:adaptiveConfig="{ offsetBottom: 108 }" :data="dataList" :columns="dynamicColumns"
					:pagination="pagination" :paginationSmall="size === 'small'" :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
					<template #operation="{ row }">
						<el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)"
							@click="openDialog('修改', row)">
							修改
						</el-button>
						<el-popconfirm :title="`是否确认删除该条数据？`" @confirm="handleDelete(row)">
							<template #reference>
								<el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(Delete)">
									删除
								</el-button>
							</template>
						</el-popconfirm>
						<!-- <el-button class="reset-margin !outline-none" link type="primary" :size="size"
							@click="onDetail(row)">
							任务详情
						</el-button> -->
					</template>
				</pure-table>
			</template>
		</PureTableBar>
	</div>
</template>

<style scoped lang="scss">
	:deep(.el-dropdown-menu__item i) {
		margin: 0;
	}

	.main-content {
		margin: 24px 24px 0 !important;
	}

	.search-form {
		:deep(.el-form-item) {
			margin-bottom: 12px;
		}
	}
</style>